<template>
  <div>
    <h1>权限的操作</h1>
    <p>权限名称:<input type="text" v-model="add.name" /></p>
    <p>权限识别名称:<input type="text" v-model="add.code_name" /></p>
    <p>
      所属职责:
      <select v-model="add.type_name">
        <option v-for="(list, i) in list2" :key="i" :value="list.id">
          {{ list.name }}
        </option>
      </select>
    </p>
    <p><button @click="addlist">添加</button></p>

    <table width="800" border="1" align="center">
      <tr>
        <th>id</th>
        <th>权限名称</th>
        <th>权限识别名称</th>
        <th>所属职责</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, i) in list" :key="i">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.code_name }}</td>
        <td>{{ item.typename }}</td>
        <td>
          <button @click="del(item.id)">删除</button>
          <button @click="put(item.id)">修改</button>
        </td>
      </tr>
    </table>
    <br /><br /><br />
    <p>id: <input type="text" v-model="data.id" /></p>
    <p>权限名称:<input type="text" v-model="data.name" /></p>
    <p>权限识别名称:<input type="text" v-model="data.code_name" /></p>
    <p>
      所属职责:
      <select v-model="data.type_name">
        <option v-for="(list, i) in list2" :key="i" :value="list.id">
          {{ list.name }}
        </option>
      </select>
    </p>
    <p><button @click="update">确认修改</button></p>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      list: [],
      list2: [],
      add: {
        name: "",
        code_name: "",
        type_name: "",
      },
      data: {
        id: 0,
        name: "",
        code_name: "",
        type_name: "",
      },
    };
  },
  mounted() {
    Axios.get("http://127.0.0.1:8000/permission/")
      .then((resp) => {
        console.log("加载数据的响应:", resp);
        this.list = resp.data;
      })
      .catch((err) => {
        console.log(err);
      });
    Axios.get("http://127.0.0.1:8000/users/permission_type/").then((resp) => {
      console.log("加载职责的响应:", resp);
      this.list2 = resp.data;
    });
  },
  methods: {
    del(id) {
      Axios.delete("http://127.0.0.1:8000/permission/" + id + "/")
        .then((resp) => {
          this.list = resp.data;
          alert("删除成功");
          Axios.get("http://127.0.0.1:8000/permission/").then((resp) => {
            this.list = resp.data;
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addlist() {
      Axios.post("http://127.0.0.1:8000/permission/", this.add)
        .then((resp) => {
          console.log("添加的响应:", resp);
          console.log(resp.data);
          Axios.get("http://127.0.0.1:8000/permission/").then((resp) => {
            this.list = resp.data;
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    put(id) {
      Axios.get("http://127.0.0.1:8000/permission/" + id + "/").then((resp) => {
        console.log("获取需要修改的数据:", resp);
        this.data = resp.data;
      });
    },
    update() {
      Axios.put(
        "http://127.0.0.1:8000/permission/" + this.data.id + "/",
        this.data
      )
        .then((resp) => {
          console.log("点击修改的响应:", resp.data);
          Axios.get("http://127.0.0.1:8000/permission/").then((resp) => {
            this.list = resp.data;
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>